@mixin dialog-code {
  padding: 5px;
  background: #f5f5f5;
  display: block;
  font-family: $code-font;
  word-break: break-all;
}

.import-file-dialog, .export-file-dialog {
  header {
    margin-bottom: 15px;

    code {
      @include dialog-code;
    }
  }

  form {
    input[name="export_to_file"] {
      background: transparent;
      border: none;
      font-size: 12px;
      outline: none;
    }
    code {
      margin: 13px 0;

      @include dialog-code;

      display: none;
      overflow: auto;
      max-height: 300px;
      box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    }
  }

  &.importing, &.exporting {
    form code {
      display: block;
    }
  }
}

.show-sql-dialog {
  code {
    margin: 13px 0;

    @include dialog-code;

    overflow: auto;
    max-height: 400px;
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    text-align: left;
    white-space: pre-wrap;
    word-break: normal;
  }
}

.new-snippet-dialog {
  p.input {
    text-align: left;
  }
  label {
    display: inline-block;
    text-align: right;
    width: 30%;
    vertical-align: top;
    margin-right: 5px;
    line-height: 28px;
  }
  input, textarea {
    display: inline-block;
    width: calc(70% - 21px);
    margin: 3px;
  }
  textarea {
    height: 3em;
  }

  code.snippet-sql {
    max-width: 700px;
    width: 100%;
    max-height: calc(100vh - 320px);
    min-height: 10em;
    overflow: auto;
    white-space: pre-wrap;
    font-family: $code-font;
    text-align: left;
  }
}

.heroku-connection-dialog {
  code {
    @include dialog-code;
    margin: 10px 0;
    max-width: 700px;
  }

  p {
    margin: 10px 0;
  }

  button.save-conn {
    margin-right: 10px;
  }
}

.edit-procedure-dialog {
  max-width: 75vw;
  textarea, .CodeMirror {
    border: 1px solid #ccc;
    min-height: 368px;
    text-align: left;
    max-width: 100%;
  }
}

.alertify-inner.edit-value {
  input.number-value, input.date-value, textarea {
    width: 100%;
    font-size: 13px;
  }
  input.number-value, input.date-value, textarea, select {
    &[disabled] {
      background: #f5f5f5;
    }
  }

  textarea {
    min-height: 50px;
    max-height: calc(100vh - 250px);
    line-height: 1.5em;
  }
  &.edit-value-wide {
    textarea {
      min-width: 800px;
    }
  }
}

.new-index-dialog {
  ul.columns-names {
    margin: 3px auto 10px;
    text-align: left;
    width: 70%;
    border: 1px solid #ccc;

    li + li {
      border-top: 1px solid #ccc;
    }
  }
  .docs-link {
    margin-top: 6px;
  }
}

.related-records-dialog {
  max-width: 75vw;
  table {
    width: 100%;
    border-collapse: collapse;
    td {
      border: 1px solid #ccc;
      padding: 2px 7px;
    }
    td ~ td {
      word-break: break-all;
    }
    & ~ table {
      margin-top: 15px;
    }
  }
}

.alertify-inner.connection-list {
  width: 900px;
  //max-width: 350px;
  margin-bottom: 5px;
  table {
    td, th {
      word-break: break-all;
    }
    code {
      max-width: 700px;
      margin: 1px 0;

      @include dialog-code;

      padding: 3px 5px;
      overflow: auto;
      max-height: 400px;
      box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
      text-align: left;
      white-space: pre-wrap;
      word-break: normal;
    }
    i.null {
      font-style: normal;
      color: #b8b8b8;
      font-size: 12px;
      opacity: 0.75;
    }
  }
}